<template>
    <div id="login">
        <h1>朗润居物业报修系统</h1>
        <div style="display:block; padding-bottom: 30px">
            <img src="../assets/house.png" style="width: 80px;">
        </div>

        <div style="margin-top: 10p">
            <mt-field label="用户名" placeholder="请输入账号" v-model="userLogin.u_id"></mt-field>
            <mt-field label="密码" placeholder="请输入密码" type="password" v-model="userLogin.u_pwd"></mt-field>
            <div class="row">
                <div class="ckbox_wrap" @click="remembSet" :class="{active: rememb}">
                    <i class="iconfont" :class="{'icon-xuanze':rememb, 'icon-kongkuang': !rememb}" ></i>
                    <span>记住密码</span>
                </div>
                <div class="ckbox_wrap" @click="autoLoginSet" :class="{active: autologin}">
                    <i class="iconfont"  :class="{'icon-xuanze':autologin, 'icon-kongkuang': !autologin}" ></i>
                    <span>自动登录</span>
                </div>
            </div>
            <mt-button type="primary" size="large" @click="login">登录</mt-button>
        </div>

    </div>
</template>

<script>

    import { mapMutations } from "vuex";
    import { Indicator } from 'mint-ui';
    import { Toast } from 'mint-ui';
    export default {
        name: "Login",
        inject:['reload'],
        data(){
            return {
                userLogin:{
                    u_id:'',
                    u_pwd:''
                },
                rememb:false,
                autologin:false


            }
        },
        methods:{
            ...mapMutations(["initUser"]),
            login(){
                // let self=this
                Indicator.open('正在登录...');
                setTimeout(()=>{
                    Indicator.close();
                    axios.post("safty/login/userLogin",this.userLogin)
                        .then((res)=>{
                            console.log(res);
                            if(res.success){
                                Toast({
                                    message: res.message,
                                    duration: 1500
                                });
                                let result=res.data;
                                let id = result.ro_id;
                                console.log("aaaaa--->:" + id);
                                this.$emit("bottom-bar",id);
                                console.log(result);
                                localStorage.setItem(
                                    "login_data",
                                    JSON.stringify({
                                        rememb:this.rememb,
                                        autoLogin:this.autoLogin,
                                        loginSign:res.loginSign,
                                        ro_id:result.ro_id,
                                        ro_name:result.ro_name,
                                        ro_status:result.ro_status,
                                        u_id:result.u_id,
                                        u_name:result.u_name,
                                        u_pwd:this.rememb?this.userLogin.u_pwd:""
                                    })
                                );
                                //把当前登录的用户信息放到 sessionStoreage里面一份
                                window.sessionStorage.setItem("LoginUser",JSON.stringify(result));
                                //把当前登录的用户信息放到vuex
                                // this.$store.commit('initUser',result)
                                this.initUser(result);
                                //登录成功，通过角色动态生成header和tabber
                                this.$router.push({path:'/home'})
                                //会闪烁，但是可以
                                this.$router.go(0);
                                // self.reload();

                            }
                            else {
                                Toast({
                                    message: res.message,
                                    duration: 1500
                                });
                            }
                        })
                        .catch((err)=>{
                            Toast({
                                message: err.message,
                                duration: 1000
                            });
                            console.log(err)
                        })
                },1000)

            },
            autoLoginSet(){
                console.log("执行autoLoginSet");
                //设置当前的autologin为true或者false
                this.autologin=!this.autologin;
                //另外设置rememb
                this.autologin && (this.rememb=true);
            },
            remembSet(){
                console.log("执行remembSet");
                this.rememb=!this.rememb;
                this.rememb||(this.autologin=false);
            }
        },
        mounted(){
            //本来就是字符串
            let data=JSON.parse(localStorage.getItem("login_data"));
            if(data){
                this.userLogin.u_id=data.u_id;
                this.userLogin.u_pwd=data.u_pwd;
            }
            console.log("autoLogin:"+this.autologin)
            if(this.autologin){
                this.login();
            }
        },
    }
</script>

<style scoped>
    h1{
        text-align: center;
        font-size: 26px;
        height: 100px;
        color: dodgerblue;
        font-family: "Malgun Gothic";

    }
    .row{
        font-size: 16px;
        display: flex;
        padding-top: 10px;
        padding-bottom: 20px;
        justify-content: space-around;

    }
    .ckbox_wrap{
        padding-left: 10px;
        font-family: "Microsoft JhengHei UI";
    }
    .ckbox_wrap.active{
        color: deepskyblue;
    }
    i{
        display: inline-block;
    }
    #login{
        position: absolute;
        top:50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>